<template>
  <div >

    <el-container>
      <el-main>

        <!--<el-col :md="24" :sm="24">
          <div id="test" :style="{width: '100%', height: '300px'}"></div>
        </el-col>-->
        <h3>楼盘分布图</h3>
        <baidu-map style="width: 100%;height: 900px" :center="center" ak="rentHouseMap" :zoom="12" :scroll-wheel-zoom="true" @ready="handler">
          <my-overlay v-for="(item,i) in rentHouseMap" :key="i"
                      :position="item.center"
                      :address="item.address"
                      :count="item.count"
                      :active="item.active"
                      @mouseover.native="item.active = true"
                      @mouseleave.native="item.active = false">
          </my-overlay>
        </baidu-map>
      </el-main>
    </el-container>


  </div>

</template>

<script>
  import MyOverlay from '@/components/BaiduMap/MyOverlay'
  import oldhouseApi from '@/api/oldhouse'
  import newhouseApi from '@/api/newhouse'
  import resourceApi from '@/api/resource'
  import statisticApi from '@/api/statistic'
  import areaApi from '@/api/area'
    export default {
      name: 'dashboard',
      components:{
        MyOverlay
      },
      data() {
        return {
          center:  {lng: 116.404, lat: 39.915},
          //center:'太原',
          zoom: 4,
          renthousecount:'',
          newhousecount:'',
          oldhousecount:'',
          keyword: '',
          location: '北京',
          rentHouseMap:[
          ]
        }
      },
      created() {
        this.initnewHouseMap()
      },
      mounted() {
      },
      methods: {

        handler({ BMap, map }) {
          console.log(BMap, map)
          console.log(this.rentHouseMap)
          this.zoom = 15
        },
        draw ({el, BMap, map}) {
          const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 139.915))
          el.style.left = pixel.x - 60 + 'px'
          el.style.top = pixel.y - 20 + 'px'
        },
        getPosition (e) {
          alert(`${e.point.lng} / ${e.point.lat}`)
        },
        initnewHouseMap(){
          statisticApi.newhousemapCounty().then(response=>{
            this.rentHouseMap = response.data
          })
          console.log(this.rentHouseMap)
        }


      }
    }
</script>

<style scoped>
  .app-main{
    margin: 0px;
    background: #f0f2f5;
  }
  .sample {
    width: 100px;
    height: 100px;
    line-height: 40px;
    border-radius: 50%;
    background: rgba(0, 102, 204,0.9);
    overflow: hidden;
    box-shadow: 0 0 5px #000;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: absolute;
  }
  .sample.active {
    background: rgba(0,0,0,0.75);
    color: #fff;
  }
  .crow{
    padding: 20px;
    color: #fff;

  }
  .citem{
    border-radius: 4px;
    height: 144px;
    padding: 20px
  }
</style>
